<template>
  <div class="app-container">
    <div class="footer">
      <div class="util" v-if="auth && auth.add">
        <el-button type="primary" @click="addHandler">
          <el-icon>
            <Plus />
          </el-icon>
          新增
        </el-button>
      </div>
      <div class="table-inner">
        <el-table class="table" v-loading="loading" row-key="id" :data="list" style="width: 100%" border>
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column prop="title" label="标题" show-overflow-tooltip align="center"/>
          <!-- <el-table-column prop="content" label="内容">
            <template #default="scope">
              <span v-html="scope.row.content"></span>
            </template>
          </el-table-column> -->
          <el-table-column prop="create_time" label="创建时间" align="center" width="180"/>
          <el-table-column prop="operator" label="操作" width="200px" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)" v-if="auth && auth.edit">
                编辑
              </el-button>
              <el-button type="danger" size="small" icon="Delete" @click="del(scope.row)" v-if="auth && auth.delete">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination v-model:currentPage="query.page" :page-size="query.limit" :total="total" background
          layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <EquiDialog ref="equiDialog" @refresh="getList" />
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import EquiDialog from './components/EquiDialog.vue'
import { helperIndex, helperDelete, helperEdit } from '@/api/admin'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(true)
const list = ref()
const total = ref(0)
const query = reactive({
  page: 1,
  limit: 10,
})
const auth = ref()
const equiDialog = ref()

const getList = () => {
  loading.value = true
  helperIndex(query).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = res.data.data
      total.value = res.data.count
    }
    loading.value = false
  })
}

const addHandler = () => {
  equiDialog.value.show()
}
const editHandler = (row) => {
  equiDialog.value.show(row)
}

const del = (row) => {
  ElMessageBox.confirm(`你确定要删除 “${row.title}” 吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    helperDelete({
      id: row.id,
    }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}
const handleSizeChange = (val: number) => {
  query.page = 1
  query.limit = val
  getList()
}

const handleCurrentChange = (val: number) => {
  query.page = val
  getList()
}

const jumpPath = (url) => {
  router.push(url)
}

getList()
</script>

<style scoped lang="scss">
@import './index';
</style>
